<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery.min.js"></script>
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			.nav {
				margin: 100px auto;
				width: 500px;
			}
			.nav>li {
				float: left;
				width: 100px;
				height: 30px;
			}
			.nav>li>a:hover {
				background-color: gold;
			}
			.nav>li>a {
				display: inline-block;
				width: 100px;
				text-decoration: none;
				text-align: center;
				line-height: 30px;
				background-color: #ccc;
				color: white;
			}
			.nav>li>ul {
				display: none;
			}
			.nav>li>ul>li:hover {
				background-color: #fff;
			}
			.nav>li>ul>li {
				font-size: 12px;
				text-align: center;
				line-height: 30px;
				background-color: #FFDAB9;
				border: 1px solid gainsboro;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">小草</a>
				<ul>
					<li>小花</li>
					<li>小花</li>
					<li>小花</li>
				</ul>
			</li>
			<li>
				<a href="#">小草</a>
				<ul>
					<li>小花</li>
					<li>小花</li>
					<li>小花</li>
				</ul>
			</li>
			<li>
				<a href="#">小草</a>
				<ul>
					<li>小花</li>
					<li>小花</li>
					<li>小花</li>
				</ul>
			</li>
		</ul>
		<script>
//			$(function() {
//				//鼠标经过
//				$(".nav>li").mouseover(function() {
//					//谁调用方法 谁就是 this    在$()用this 不加双引号""
//					$(this).children("ul").show();   //显示是show()
//				});
//				//鼠标离开
//				$(".nav>li").mouseout(function() {
//					$(this).children("ul").hide();  //隐藏是hide()
//				});
//			});
			//改进 添加动画效果
			$(function() {
//				//鼠标经过
//				$(".nav>li").mouseover(function() {
//					//谁调用方法 谁就是 this    在$()用this 不加双引号""
//					$(this).children("ul").slideDown(200);   //下滑动
//				});
//				//鼠标离开
//				$(".nav>li").mouseout(function() {
//					$(this).children("ul").slideUp(200);     //上滑动
//				});
				//1. 事件切换 hover 就是鼠标经过和离开的复合写法
//             $(".nav>li").hover(function() {
//                 $(this).children("ul").slideDown(200);
//             }, function() {
//                 $(this).children("ul").slideUp(200);
//             });
				//2.hover如果只写一个函数时，鼠标经过 鼠标离开 都触发这个函数
				$(".nav>li").hover(function() {
                   $(this).children("ul").stop().slideToggle(200);
                   //stop方法  停止动画排队   必须写到动画效果前边
               });
			});
		</script>
	</body>
</html>
